<!--
 * @description: 打卡时间
 * @Author: Coder
 * @Date: 2020-01-19 11:11:09
 * @LastEditors: Coder
 -->
<template>
  <div>
    <a-modal v-model="visible2" destroy-on-close :width="800" title="排班周期" @ok="handleOk2">
      <a-form :form="form2">
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="周期名称">
          <a-input
            v-decorator="[
              'cycleName',
              {
                initialValue: attendCycleList.cycleName,
                rules: [
                  {
                    required: true,
                    message: '名称由1~8个中文、英文、数字组成'
                  }
                ]
              }
            ]"
            style="width: 249px"
            placeholder="例如'三班倒', 不能超过8个字符"
          />
        </a-form-item>
        <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="周期天数">
          <a-row type="flex" align="middle">
            <a-col v-for="(items, j) in attendCycleList.cycleDays" :span="12" :key="j">
              {{ items.daysName }}
              <a-select class="mg_l10 mg_r10" style="width: 160px">
                <a-select-option v-for="op in select" :value="op.name" :key="op.name">
                  {{ op.name }}
                </a-select-option>
                <a-select-option value="休息">休息</a-select-option>
              </a-select>
              <a-icon
                v-if="attendCycleList.cycleDays.length > 1"
                class="fs18"
                type="minus-circle"
                @click="deleteCycle(items, attendCycleList.cycleDays)"
              />
              <a-icon
                v-if="attendCycleList.cycleDays.length <= 30"
                class="fs18"
                type="plus-circle"
                @click="addCycle(attendCycleList.cycleDays)"
              />
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "CardTime",

  props: {
    chechCardTimeOptions: {
      show: false,
      editorType: false,
      obj: {}
    }
  },
  data() {
    return {
      visible2: false,
      editorType: false,
      form2: this.$form.createForm(this, { name: "addFreeName2" }),
      attendCycleList: {
        cycleName: "", // 周期名称
        cycleDays: [
          {
            daysName: "第1天", // 第几天
            shiftName: "休息" // 班次名称
          }
        ]
      }
    };
  },
  computed: {
    away() {
      let i = 0;
      const awayBox = [];
      while (i <= 60) {
        awayBox.push({
          value: `${i}分钟`,
          key: i
        });
        i += 15;
      }
      return awayBox;
    },
    contralTime() {
      let i = 480;
      const contralTimeBox = [];
      while (i >= 0) {
        contralTimeBox.push({
          value: `${i / 60}小时内`,
          key: i
        });
        i -= 30;
      }
      return contralTimeBox;
    },
    select() {
      return this.$parent.editorData.attendShiftList;
    }
  },
  watch: {
    chechCardTimeOptions: {
      handler(val) {
        this.visible2 = val.show;
        this.editorType = val.editorType;
        if (val.editorType) {
          this.attendCycleList = val.obj;
        } else {
          this.attendCycleList = {
            cycleName: "", // 周期名称
            cycleDays: [
              {
                daysName: "第1天", // 第几天
                shiftName: "休息" // 班次名称
              }
            ]
          };
        }
      }
    }
  },

  methods: {
    /* 增加 */
    addCycle(item) {
      this.attendCycleList.cycleDays.push({
        daysName: `第${item.length + 1}天`, // 第几天
        shiftName: "休息" // 班次名称
      });
    },
    /* 删除 */
    deleteCycle(item, arr) {
      arr = arr.pop();
    },
    /* 添加周期 */
    handleOk2() {
      this.form2.validateFields((err, values) => {
        if (!err) {
          this.attendCycleList.cycleName = values.cycleName;
          if (this.editorType) {
            this.$parent.editorData.attendCycleList.filter(val => {
              if (val.cycleName === this.attendCycleList.cycleName) {
                return (val = this.attendCycleList);
              }
            });
          } else {
            this.$parent.editorData.attendCycleList.push(this.attendCycleList);
          }
          this.visible2 = false;
        }
      });
    }
  }
};
</script>
